<template>
	<view>
		<uni-card>
			<uni-row>
				<uni-col span="4">
					<view class="tp"></view>
				</uni-col>
				<uni-col span="20">
					<view class="characters">预约入园时间</view>
					<view class="charactersone">2024年9月19日  9:00-11:00</view>
				</uni-col>
			</uni-row>
		</uni-card>
		<view class="yuyue">
			    <text class="yuyue-text">主预约人</text>
			</view>
		<uni-card>
			<view class="msg">
				姓名<span style="color: red;">*</span>:
			</view>
			<view>
				<uni-easyinput placeholder="请输入预约人姓名"></uni-easyinput>
			</view>
			<view class="msg">
				证件类型<span style="color: red;">*</span>:
			</view>
			<view>
				<uni-data-select v-model="value" :localdata="range" @change="change">
				</uni-data-select>
			</view>
			<view class="msg">
				证件号码<span style="color: red;">*</span>:
			</view>
			<view>
				<uni-easyinput placeholder="请输入证件号码"></uni-easyinput>
			</view>
			<view class="msg">
				手机号码<span style="color: red;">*</span>:
			</view>
			<view>
				<uni-easyinput placeholder="请输入手机号码"></uni-easyinput>
			</view>
			<view>
				<uni-data-checkbox multiple :localdata="notes"></uni-data-checkbox>
			</view>
			<view class="checkbox">
				<uni-data-checkbox mode="tag" :localdata="count">
				</uni-data-checkbox>
			</view>
		</uni-card>
		
		<view>
		  <view v-for="(person, index) in persons" :key="index" class="info-box">
		    <uni-row>
		      <uni-col span="9">
				  <view class="yuyue">
		      <text class="yuyue-text">同行人 {{ index + 1 }}</text>
		           </view>
		       </uni-col>
		       <uni-col span="15">
				<view>
			  <button class="shanchu" @click="removePerson(index)"><image class="shanchupng" src="../../static/shanchu.png"></image></button>
			   </view>
		       </uni-col>
		    </uni-row>
		    <view>
		      <uni-card>
		        <view class="msg">
		          姓名<span style="color: red;">*</span>:
		        </view>
		        <view>
		          <uni-easyinput v-model="person.name" placeholder="请输入预约人姓名"></uni-easyinput>
		        </view>
		        <view class="msg">
		          证件类型<span style="color: red;">*</span>:
		        </view>
		        <view>
		          <uni-data-select v-model="value" :localdata="range" @change="change">
		          </uni-data-select>
		        </view>
		        <view class="msg">
		          证件号码<span style="color: red;">*</span>:
		        </view>
		        <view>
		          <uni-easyinput v-model="person.idNumber" placeholder="请输入证件号码"></uni-easyinput>
		        </view>
		        <view class="msg">
		          手机号码<span style="color: red;">*</span>:
		        </view>
		        <view>
		          <uni-easyinput v-model="person.phoneNumber" placeholder="请输入手机号码"></uni-easyinput>
		        </view>
		      </uni-card>
		    </view>
		  </view>
		  <button @click="addPerson">添加同行人</button>
		</view>
		<view>
			<view class="tp1"></view>
		</view>
		<view class="msg3-text">
			<text class="msg3">最多可预约成人4人，儿童3人</text>
		</view>
		<view>
			<navigator url="/pages/Appointment successful/Appointment successful">
			<button class="bu">
				<text class="msg2">提交预约</text></button>
			</navigator>
		</view>
	</view>
</template>
<script setup>
	import { ref, reactive } from 'vue';
	import {onLoad} from '@dcloudio/uni-app'
	let date = ref('');
	let time = ref('');
	onLoad((options) => {
		const params = JSON.parse(decodeURIComponent(options.params));
		console.log(params);
		date.value = Params.date;
		time.value = Params.time;
	})
	const value = ref(0);
	const range = [
		{ value: 0, text: "中国居民身份证" },
		{ value: 1, text: "港澳台居民身份证" },
		{ value: 2, text: "外籍居民身份证" },
	];
	const notes = [
		{ value: 0, text: "同行人有6周岁（含）以下货身高1.2米（含）以下儿童，只需选择儿童数。" },
	];
	const count =  [
		{value: 0,text: '1人'},
		{value: 1,text: '2人'},
		{value: 2,text: '3人'},
	];
	const persons = reactive([]);
	const change = (e) => {
		console.log("e:", e);
	};
	const onIdTypeChange = (index, e) => {
		persons[index].idTypeIndex = e.detail.value;
	};
	const addPerson = () => {
		persons.push({
		name: '',
		idTypeIndex: 0,
		idNumber: '',
		phoneNumber: ''
	});
	};
	const removePerson = (index) => {
		persons.splice(index, 1);
	};
</script>
<style scoped>
	.tp{
		width: 38px;
		height: 38px;
		background-image: url("../../static/wzjyy.png");
		margin-top: 7%;
	}
	.tp1{
		margin-left: 14px;
		width: 18px;
		height: 16px;
		background-image: url("../../static/wzjgth.png");
		mix-blend-mode: multiply;
		margin-top: 10px;
	}
	.characters{
		width: 72px;
		height: 17px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #000000;
		letter-spacing: 0;
	}
	.charactersone{
		width: 212px;
		height: 25px;
		font-family: PingFangSC-SNaNpxibold;
		font-weight: 600;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
		margin-top: 2%;
	}
	.yuyue{
		text-align: left;
		margin-left: 18px;
		margin-top: 20px;
	}
	.yuyue-text{
		font-family: PingFangSC-Medium;
		font-weight: bold;
		font-size: 15px;
		color: #000000;
		letter-spacing: 1px;
	}
	.msg{
		margin-top: 3%;
		margin-bottom: 2%;
	}
	.msg2{
		width: 68px;
		height: 24px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 17px;
		color: #FFFFFF;
		letter-spacing: 0;
	}
	.msg3{
		margin-left: 32px;
		width: 159px;
		height: 16px;
		opacity: 0.75;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #323232;
		letter-spacing: 0;
	}
	.msg3-text{
		margin-top: -21px;
	}
	.checkbox{
		margin-top: 1%;
		margin-left: 100px;
		outline-style: none ;
	}
	.bu{
		width: 351px;
		height: 45px;
		background: #8DCB6D;
		border-radius: 25px;
		margin-top: 5%;
		
	}
	.info-box {
	  margin-bottom: 10px;
	  padding: 10px;
	  border: 1px solid #ccc;
	}
	.shanchu{
	  height: 35px;
	  width: 12px;
	  margin-top: 10px;
	  margin-left: 200px;
	  background-color: unset;
	  
	}
	.shanchupng{
	  width: 18px;
	  height: 18px;
	  margin-left: -6px;
	}
</style>